<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header class="header">
        <div class="container">
            <div class="header-box">
                <div class="wc_hover">
                    <a href="./index.html">有道商城</a>
                    <a href="#">微店铺首页</a>
                </div>
                <ul>
                    <li class="line">|</li>
                    <li><a href="#">最新商品</a> </li>
                    <li class="line">|</li>
                    <li><a href="#">店铺笔记</a></li>
                </ul>
            </div>
        </div>

    </header>
    <!-- wechat -->
    <div class="wechat">
        <div class="container clearfix">
            <img src="../images/create.png" alt="" class="pull_left">
            <div class="text_box pull_left">
                <p>有道商城</p>
                <p>微信扫描二维码，访问我们的微信店铺</p>
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="container clearfix">
        <div class="content pull_left">
            <div class="content_box clearfix">
                <div class="goods pull_left">
                    <div class="banner">
                        <ul>
                            <li><img src="../images/1big.jpg" alt=""></li>
                            <li><img src="../images/2big.jpg" alt=""></li>
                            <li><img src="../images/3big.jpg" alt=""></li>
                            <li><img src="../images/4big.jpg" alt=""></li>
                            <li><img src="../images/5big.jpg" alt=""></li>
                            <li><img src="../images/6big.jpg" alt=""></li>

                        </ul>
                        <ol>

                            <li class="active"><img src="../images/1small.jpg" alt=""></li>
                            <li><img src="../images/2small.jpg" alt=""></li>
                            <li><img src="../images/3small.jpg" alt=""></li>
                            <li><img src="../images/4small.jpg" alt=""></li>
                            <li><img src="../images/5small.jpg" alt=""></li>
                            <li><img src="../images/6small.jpg" alt=""></li>

                        </ol>
                        <span class="left_btn"></span>
                        <span class="right_btn"></span>
                    </div>
                </div>
                <div class="goods-msg pull_left">
                    <h3>有道云笔套装（智能笔+点阵本）</h3>
                    <p class="price">￥698.00</p>
                    <table>
                        <tr>
                            <td>运费：</td>
                            <td>免运费</td>
                        </tr>
                        <tr>
                            <td>库存：</td>
                            <td>0件</td>
                        </tr>
                    </table>
                    <div class="state">
                        <i class="goods_state"></i>
                        <span>收藏/分享</span>
                    </div>
                    <div class="pay">
                        支付：
                        <span><i></i>微信支付</span>
                        <span><i></i>银行卡</span>
                        <span><i></i>支付宝</span>
                    </div>
                </div>
            </div>
            <div class="goods_detail">
                <h2>商品详情</h2>
                <div class="pic">
                    <img src="../images/1.jpg" alt="">
                    <img src="../images/2.jpg" alt="">
                    <img src="../images/3.jpg" alt="">
                    <img src="../images/4.jpg" alt="">
                    <img src="../images/5.jpg" alt="">
                    <img src="../images/6.jpg" alt="">
                    <img src="../images/7.jpg" alt="">
                    <img src="../images/8.jpg" alt="">
                    <img src="../images/9.jpg" alt="">
                    <img src="../images/10.jpg" alt="">
                    <img src="../images/11.jpg" alt="">
                    <img src="../images/12.jpg" alt="">
                    <img src="../images/13.jpg" alt="">
                    <img src="../images/14.jpg" alt="">
                    <img src="../images/15.jpg" alt="">
                    <img src="../images/16.jpg" alt="">
                    <img src="../images/17.jpg" alt="">
                    <img src="../images/18.jpg" alt="">
                    <img src="../images/19.jpg" alt="">
                </div>
                <div class="wc_footer">
                    <div class="container clearfix">
                        <img src="../images/create.png" alt="" class="pull_left">
                        <div class="text_box pull_left">
                            <p>有道商城</p>
                            <p>微信扫描二维码，访问我们的微信店铺</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sidebar pull_left">
            <div class="shop_logo">
                <div><img src="../images/youdao.png" alt=""></div>
                <span>有道商城</span>
            </div>
            <div class="hot_goods">
                <h5>热门商品</h5>
                <ul>
                    <li>
                        <a href="">
                            <img src="../images/hot1.png" alt="">
                            <p>【鱼爸专享】网易有道儿童词典笔K3</p>
                            <span>￥649.0</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/hot2.png" alt="">
                            <p>【鱼爸专享】网易有道儿童词典笔K3</p>
                            <span>￥649.0</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/hot3.jpeg" alt="">
                            <p>【鱼爸专享】网易有道儿童词典笔K3</p>
                            <span>￥649.0</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/hot4.jpg" alt="">
                            <p>【鱼爸专享】网易有道儿童词典笔K3</p>
                            <span>￥649.0</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="../images/hot5.jpg" alt="">
                            <p>【鱼爸专享】网易有道儿童词典笔K3</p>
                            <span>￥649.0</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- QRcode -->
        <div class="QRcode">
            <h3>手机扫码购买</h3>
            <p>微信"扫一扫"立即购买</p>
            <img src="../images/QRcode.png" alt="">
        </div>
    </div>
    <!--footer-->
    <footer>
        <div class="container">
            <div class="footer_box">
                <a href="#">
                    <img src="../images/like.png" alt="">
                    <p>有赞提供技术支持</p>
                </a>
                <a href=""><img src="../images/police.png" alt="">
                    <p>浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号-8</p>
                </a>
            </div>
        </div>
    </footer>
</body>

</html>